<template>
	<div class="parameter-div" style="margin-left: 125px">
		<el-card class="p-card" v-for="item in tipList" :key="item.id">
			<template #header>
				<div class="card-header">
					<span>{{ item.title }}</span>
				</div>
			</template>
			<el-descriptions
				title=""
				direction="vertical"
				:column="4"
				:size="size"
				bordered
			>
				<el-descriptions-item label="算法K值"
					><el-link type="primary" @click="dialogVisible = true">{{
						item.algorithm
					}}</el-link></el-descriptions-item
				>
				<el-descriptions-item label="正常阀值"
					><el-link type="primary" @click="dialogVisible = true">{{
						item.threshold
					}}</el-link></el-descriptions-item
				>
				<el-descriptions-item label="小贴士" :span="2"
					><el-link type="primary" @click="open_tip"
						>小贴士列表</el-link
					></el-descriptions-item
				>
			</el-descriptions>
		</el-card>
	</div>
	<el-dialog
		v-model="dialogVisible"
		title="修改参数"
		width="30%"
		:before-close="handleClose"
		@close-auto-focus="handleCloseAutoFocus"
	>
  <!-- input1和K值的值 -->
		<el-input
			v-model="input1"
			class="w-50 m-2"
			size="large"
			placeholder="请输入新的算法K值"
		></el-input>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false"
					>确认</el-button
				>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref } from "vue";
//import { useRouter} from 'vue-router'
import VueEvent from "../utils/event";
const dialogVisible = ref(false);
const inputRef = ref[0];

const handleCloseAutoFocus = () => {
	inputRef.value?.focus();
};

const open_tip = () => {
	const web_name = "TipList";
	VueEvent.emit("tomsg", { web_name });
};

const tipList = [
	{
		id: 1,
		title: "背包负重",
		algorithm: 1,
		threshold: 2,
	},
	{
		id: 2,
		title: "左右肩平衡",
		algorithm: 1,
		threshold: 2,
	},
	{
		id: 3,
		title: "背部姿态",
		algorithm: 1,
		threshold: 2,
	},
];

</script>

<style>
.parameter-div {
	width: 80%;
	margin-left: 200px;
}

.parameter-div .p-card {
	margin: 10px;
}
</style>
